<template>
    <view>
        <view v-if="room.length > 0" class="container">

            <view class="nav-list">
                <scroll-view :scroll-y="true" :scroll-into-view="'scroll-title-' + viewNavIndex" :show-scrollbar="false"
                    :scroll-with-animation="true" style="height: 100%;">
                    <view class="nav-item" v-for="(item, index) of room" :class="{ active: index == viewNavIndex }"
                        @click="handleClickNav(index)" :key="index" :id="'scroll-title-' + index">
                        {{ item.floor }}层
                    </view>
                </scroll-view>
            </view>
            <view class="list-wrapper">
                <!-- <view class="top">
                    <view class="top-left">自住</view>
                    <view class="top-right">出租</view>
                </view> -->
                <view class="floor-css-statistics">
                    <view v-for="(statistics, index) in floorStatistics" 
                        :key="index" class="floor-css-statistics-item" 
                        :class="`floor-css-statistics-item-${(index + 4)}`">
                        {{ statistics.name }}({{ statistics.count }})
                    </view>
                </view>
                <scroll-view class="list-container" id="list-container" @scroll="handleListScroll"
                    @touchstart="handleTouchScrollView" :scroll-y="true"
                    :scroll-into-view="'scroll-item-' + clickedNavIndex" :show-scrollbar="false"
                    :scroll-with-animation="true">

                    <!-- :class="{ 'list-active': listIndex == clickedNavIndex }" -->
                    <!-- <view class="list" v-for="(item, listIndex) of curRoom" :key="listIndex"
                        :id="'scroll-item-' + listIndex">
                        <view class="title">
                            <view>{{ item.roomName }}层</view>
                        </view>
                        
                    </view> -->

                    <view class="item-container">
                        <view class="item" v-for="(item2, index) of curRoom" :key="index"
                            @click="$emit('toRoomDetails', item2)">
                            <view class="name">
                                <!-- grade等级 -->
                                <view class="name-left" :class="item2.grade?'name-left'+item2.grade:''">
                                </view>
                                {{ item2.roomName }}
                            </view>
                            <!-- housePurpose 1自用2出租 -->
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <view v-else class="container">
            <view class="container-load">
                <span class="text">加载中</span>
                <span class="dot">...</span>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'easy-scroll',
        props: {
            topDistance: {
                type: Number,
                default: 0
            },
            rooms: {
                type: Array,
                default: () => [],
            }
        },
        data() {
            return {
                list: Array(16).fill(1), //列表数据
                isTouchScrollView: false,
                clickedNavIndex: 0,
                viewNavIndex: 0,
                nodeInfoList: [],
                room: [],
                curRoom: [],
                
                floorStatistics: [
                 //    {
                	// 	name: "已巡",
                	// 	count: 0
                	// },
                	// {
                	// 	name: "未巡",
                	// 	count: 0
                	// },
                	// {
                	// 	name: "出租",
                	// 	count: 0
                	// },
                	// {
                	// 	name: "自住",
                	// 	count: 0
                	// },
                	{
                		name: "禁止",
                		count: 0
                	},
                	{
                		name: "严管",
                		count: 0
                	},
                	{
                		name: "关注",
                		count: 0
                	},
                	{
                		name: "普通",
                		count: 0
                	},
                ],
            };
        },
        onShow() {},
        created() {
            this.room = this.rooms;
            this.$nextTick(function () {
                this.init();
            });
        },
        methods: {
            init() {
                const query = uni.createSelectorQuery().in(this);
                if (!this.rooms || this.rooms.length == 0) {
                    return;
                }
                
                let floorObj = this.clickedNavIndex ? this.room[clickedNavIndex]
                    : this.room[0];
                this.curRoom = floorObj.letRoomInfoModelList;
                for (let i = 0; i < this.floorStatistics.length; i++) {
                    this.floorStatistics[i].count = floorObj[`gradeType${4-i}`] || 0;
                }
                
                let a;
                query
                    .select('#scroll')
                    .boundingClientRect(data => {
                        a = data.top;
                    })
                    .exec();
                query
                    .selectAll('#list-container .list')
                    .boundingClientRect(data => {
                        // console.log(data);
                        this.nodeInfoList = data;
                    })
                    .exec();
                this.nodeInfoList = this.nodeInfoList.map(item => {
                    item.top -= a;
                    return item;
                });
            },
            handleClickNav(nav) {
                let floorObj = this.room[nav];
                this.curRoom = floorObj.letRoomInfoModelList;
                for (let i = 0; i < this.floorStatistics.length; i++) {
                    this.floorStatistics[i].count = floorObj[`gradeType${4-i}`] || 0;
                }

                if (!this.isTouchScrollView && this.clickedNavIndex == nav) return;
                // 锁定联动
                this.isTouchScrollView = false;
                // 解决clickedNavIndex相同触发更新失败
                if (this.clickedNavIndex == nav) {
                    this.clickedNavIndex = -1;
                }
                this.$nextTick(function () {
                    this.clickedNavIndex = nav;
                    this.viewNavIndex = nav;
                });
            },
            handleListScroll(e) {
                if (!this.isTouchScrollView) return;
                let scrollTop = (this.scrollTop = e.detail.scrollTop);
                let currentNavIndex = this.nodeInfoList
                    .map((item, index) => ({
                        index,
                        ...item
                    }))
                    .filter(item => item.top <= scrollTop + this.topDistance)
                    .sort((a, b) => b.top - a.top)[0].index;
                this.viewNavIndex = currentNavIndex;
            },
            handleTouchScrollView() {
                this.isTouchScrollView = true;
            }
        },
        mounted() {
            // this.$nextTick(function() {
            // 	this.init();
            // 	console.log(this.rooms.length);
            // });
        },
        watch: {
            rooms(val) {
                this.room = val;
                this.$nextTick(function () {
                    this.init();
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        // height calc(100vh - var(--window-top))
        height: 100%;

        .container-load {
            margin: auto;

            .text {
                background-color: #fff;
                position: relative;
                z-index: 2;
            }

            .dot {
                font-family: simsun;
                position: absolute;
            }

            :root .dot {
                display: inline-block;
                width: 10rpx;
                vertical-align: bottom;
                overflow: hidden;
            }

            @keyframes dot {
                0% {
                    width: 0;
                    margin-left: -1.5em;
                }

                33% {
                    width: 0.5em;
                    margin-left: -1em;
                }

                66% {
                    width: 1em;
                    margin-left: -0.5em;
                }

                100% {
                    width: 1.5em;
                    margin-left: 0;
                }
            }

            .dot {
                -webkit-animation: dot 3s infinite step-start;
            }

            @keyframes dot {
                0% {
                    width: 0;
                    margin-left: -1.5em;
                }

                33% {
                    width: 0.5em;
                    margin-left: -1em;
                }

                66% {
                    width: 1em;
                    margin-left: -0.5em;
                }

                100% {
                    width: 1.5em;
                    margin-left: 0;
                }
            }

            .dot {
                animation: dot 3s infinite step-start;
            }
        }

        .nav-list {
            width: 120rpx;
            // border-right 2rpx solid #efefef
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 26rpx;

            &::-webkit-scrollbar {
                width: 0;
                height: 0;
                background: transparent;
            }

            .nav-item {
                box-sizing: border-box;
                width: 100%;
                padding: 20rpx 0;
                text-align: center;
                transition: transform 0.1s linear;
                background-color: #f0f2f5;
                font-size: 32rpx;

                &.active {
                    color: #3369e7;
                    transform-origin: center center;
                    // transform scale(1.32)
                    background-color: #fff;
                }
            }
        }

        .list-wrapper {
            flex: 1;
            position: relative;

            .top {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 25px;

                .top-left {
                    padding: 2px 10px;

                    &::before {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        content: "";
                        background-color: #ec9f3c;
                        margin-right: 5px;
                    }
                }

                .top-right {
                    padding: 2px 10px;

                    &::before {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        content: "";
                        background-color: #4ca4fe;
                        margin-right: 5px;
                    }
                }
            }
            
            .floor-css-statistics {
            	padding: 10rpx 25rpx;
                display: flex;
                justify-content: center;
            
            	.floor-css-statistics-item {
            		color: #333333;
            		font-size: 26rpx;
            		display: inline-block;
            		position: relative;
            		align-items: center;
            		padding: 0 5rpx;
            		width: 23%;
            		margin-top: 10rpx;
            
            		&::before {
            			content: '';
            			position: absolute;
            			display: block;
            			background-color: #81D3F8;
            			width: 22rpx;
            			height: 22rpx;
            			left: -23rpx;
            			top: 8rpx;
            			border-radius: 15rpx;
            		}
            	}
            
            	.floor-css-statistics-item-1 {
            		&::before {
            			background-color: #f3f5f9;
            		}
            	}
            
            	.floor-css-statistics-item-2 {
            		&::before {
            			background-color: #8400FF;
            		}
            	}
            
            	.floor-css-statistics-item-3 {
            		&::before {
            			background-color: #7F7F7F;
            		}
            	}
            
            	// 禁止
            	.floor-css-statistics-item-4 {
            		&::before {
            			background-color: #ee4949;
            		}
            	}
            
            
            	// 严管
            	.floor-css-statistics-item-5 {
            		&::before {
            			background-color: #f3a249;
            		}
            	}
            
            	// 关注
            	.floor-css-statistics-item-6 {
            		&::before {
            			background-color: #f3d949;
            
            		}
            	}
            
            	// 普通
            	.floor-css-statistics-item-7 {
            		&::before {
            			background-color: #3e97df;
            		}
            	}
            }

            .list-container {
                // position: absolute;
                // top: 25px;
                left: 0;
                right: 0;
                bottom: 0;
                // padding: 0 0 0 20rpx;
                box-sizing: border-box;

                .list-active {
                    background-color: rgba(208, 223, 254, 0.8);
                }

                .title {
                    height: 80rpx;
                    line-height: 80rpx;
                    text-align: center;
                    color: #3369e7;

                    view {
                        font-size: 38rpx;
                    }
                }

                .item-container {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;

                    .item {
                        width: 30%;
                        text-align: center;
                        padding: 14rpx 0;
                        margin: 0 1%;

                        .tj {
                            display: flex;
                            align-items: center;

                            .tj-left,
                            .tj-right {
                                width: 50%;
                                text-align: center;
                                font-size: 12px;
                                color: #fff;
                                padding: 2px 0;
                            }

                            .tj-left {
                                background-color: #ec9f3c;
                            }

                            .tj-right {
                                background-color: #4ca4fe;
                            }
                        }

                        .name {
                            font-size: 32rpx;
                            color: #333;
                            padding: 25rpx 0;
                            background-color: #f0f2f5;
                            border-radius: 10rpx;
                        }
                        
                        .name-left {
                            display: inline-block;
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            content: "";
                            // background-color: #ec9f3c;
                            margin-right: 5px;
                        }

                        .name-left1 {
                            background-color: #3e97df;
                        }

                        .name-left2 {
                            background-color: #f3d949;
                        }
                        
                        .name-left3 {
                            background-color: #f3a249;
                        }
                        
                        .name-left4 {
                            background-color: #ee4949;
                        }

                    }
                }
            }
        }
    }
</style>